<template>
	<view class="index-hot-spot" @click="clickNews">
		<view class="title">
			<image v-if="news.hotpoint_is_top" class="img" src="@/static/images/common/hot.svg" mode=""></image>
			<view class="title-text">
				{{ news.hotpoint_title }}
			</view>
		</view>
		<view class="content">
			<text class="source">{{ news.hotpoint_source }}</text>
			<text>{{ news.hotpoint_publish_time | timeFormat('YYYY-MM-DD HH:mm') }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'IndexHotSpot',
		props: {
			news: {
				type: Object
			}
		},
		methods: {
			clickNews() {
				this.$emit('click-news', this.news);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-hot-spot {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		width: 650rpx;
		height: 70px;
		box-sizing: border-box;
		
		background-color: #ffffff;
		.title {
			display: flex;
			align-items: center;
			// margin-bottom: 8px;
			
			font-size: 14px;
			
			color: $uni-text-color;
			&-text {
				flex: 1;
				
				overflow: hidden;/*超出部分隐藏*/
				text-overflow:ellipsis;/* 超出部分显示省略号 */
				white-space: nowrap;/*规定段落中的文本不进行换行 */
			}
			.img {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}
		}
		.content {
			display: flex;
			font-size: 12px;
			
			color: #999999;
			
			.source {
				display: inline-block;
				max-width: 7em;
				
				margin-right: 20rpx;
				
				overflow: hidden;/*超出部分隐藏*/
				text-overflow:ellipsis;/* 超出部分显示省略号 */
				white-space: nowrap;/*规定段落中的文本不进行换行 */
			}
		}
	}
</style>
